<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
const route = useRouter();
import SaMap from '@/components/common/samap.vue';
import { dataCount, Grids, layerInfo, wangges, xiaoban, speciesStatistics, areaMediaPage, locationMediaPage, Gnqh, GridsData, areaData, loaltionData, GridsMediaPage } from '@/utils/api.js';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'	//导入Search图标
import preVideo from '@/components/common/preVideo.vue';
const isSpecies = ref(false);
import * as echarts from 'echarts';
const year = ref(new Date());
import close from '@/assets/icon/close.svg';
let time = '2024';
let ghid = [];
const iswgp = ref(false);
const cnmdw = ref(true);
const morData = ref({});
const majorEnvirType = ref([]);
const dataSourceCount = ref([]);
const layNum = ref(0);
const dscs = ref(0);
const realTimeNum = ref(0);
const isgdzp = ref(false);
const wgName = ref('0');
const times = ref('');
const timeStr = ref('');
const recoverNum = ref(0);
const currentPage = ref(1);
const totalElements = ref(0);
const pageNum = ref(1);
const mediaList = ref([]);
const list = ref([]);
const animalInfo = ref([]);
const loading = ref(false);
const activeName = ref("全部物种分布");
const layerType = ref('网格');
const smap = ref(null);
const SpeciesList = ref([]);
const lookVideo = ref(null)
import pc440 from '@/assets/img/pc440.png'
import pc450 from '@/assets/img/pc450.png'
import pc200 from '@/assets/img/pc200.png'
import pc100 from '@/assets/img/pc100.png'
import shipin from '@/assets/img/shipin.jpg'

import iconaudio from '@/assets/img/iconaudio.png'
import audiogif from '@/assets/img/audiogif.gif'

let gridid = [];
const gridMap = ref({});
const typelist = [
    {
        id: "fnsjkfs02391",
        value: "按网格",
        label: "网格",
        iszk: true
    },
    {
        id: "fnsjkfs02392",
        value: "按区域",
        label: "区域",
        iszk: false
    },
    {
        id: "fnsjkfs02393",
        value: "热力分布",
        label: "热力",
        iszk: false
    },
    {
        id: "fnsjkfs02394",
        value: "点位分布",
        label: "点位",
        iszk: false
    }
]

const typeData = [
    {
        label: '全部物种分布',
        iszk: true
    },
    {
        label: '常见动物分布',
        iszk: false
    },
    {
        label: '重点保护动物分布',
        iszk: false
    },
    {
        label: '兽类分布',
        iszk: false
    },
    {
        label: '鸟类分布',
        iszk: false
    }
]

const clist = ref([])

import twavs from '@/assets/img/twavs.png'

const audioPlayer = new Audio();
const isplay = ref(null);
const playAudio = (item) => {
    // 创建一个Audio对象

    // 如果当前正在播放，先暂停
    // if (audioPlayer.paused === false) {
    //     audioPlayer.pause();
    // }

    // 设置新的音频源
    audioPlayer.src = item.mediaUrl;
    // 加载并播放音频
    audioPlayer.load();

    if (isplay.value == item.id) {
        isplay.value = null
        audioPlayer.pause();
    } else {
        isplay.value = item.id
        audioPlayer.play();
        audioPlayer.addEventListener('ended', function () {
            isplay.value = null
            console.log('音频播放完毕！');
        });
    }
}

const drawLine = (data) => {
    if (document.getElementById("chart1") == null) {
        return
    }
    echarts.dispose(document.getElementById("chart1"));
    let myChart = echarts.init(document.getElementById("chart1"));
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: '各月份频次统计',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            right: 10,
            top: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            type: 'value'
        },
        series: data 
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

}

const drawPie = (dom, data, title, names) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    let sum = 0;
    let legenName = [];
    data.forEach((item) => {
        sum += item.value;
        legenName.push(item.name)
    });
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            formatter: (name) => {
                if (data.length) {
                    const item = data.filter((item) => item.name === name)[0];
                    return `${name}` + '  (' + `${((item.value / sum) * 100).toFixed(1)}%` + ')';
                }
            },
            data: legenName
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['20%', '80%'],
                center: ['35%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 4
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter(item) {
                        return `${item.value}`;
                    },
                    fontSize: 14,
                    color: '#000',
                    fontFamily: 'albbhpt-medium'
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

    myChart.on('click', function (params) {
        let typeName = params.name
        names.forEach(e => {
            if (e.label == typeName) {
                SpeciesList.value = e.names;
                isSpecies.value = true;
                return false
            }
        })
    });
}

const drawpie2 = (dom, data, names) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    var dataHigh = data[0].value;
    var dataMiddle = data[1].value;
    var dataLow = data[2].value;
    var total = 0;
    for (var i = 0; i < data.length; i++) {
        total += data[i].value;
    }
    let option = {
        backgroundColor: '#F5F7FA',
        title: [
            {
                textStyle: {
                    fontSize: 14 // 设置标题的字体大小
                },
                text: '保护等级统计',
                top: 10,
                left: 10
            },
            {
                text: '国家一级',
                bottom: '5%',
                left: '15%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center',
                }
            },
            {
                text: '国家二级',
                bottom: '5%',
                left: '50%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center'
                }
            },
            {
                text: '其他',
                bottom: '5%',
                left: '85%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center'
                }
            }
        ],
        graphic: [
            {
                type: 'text',
                top: '48%',
                left: '12%',
                style: {
                    text: dataHigh + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#F84848'
                }
            },
            {
                type: 'text',
                top: '48%',
                left: '47%',
                style: {
                    text: dataMiddle + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#FCBE47'
                }
            },
            {
                type: 'text',
                top: '48%',
                left: '82%',
                style: {
                    text: dataLow + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#9747FF'
                }
            }
        ],
        tooltip: {
            show: false
        },
        series: [
            {
                name: '国家一级',
                type: 'pie',
                center: ['15%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataHigh,
                        name: '',
                        itemStyle: {
                            color: '#F84848'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataHigh // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '国家二级',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataMiddle,
                        name: '',
                        itemStyle: {
                            color: '#FCBE47'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataMiddle // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '其他',
                type: 'pie',
                center: ['85%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataLow,
                        name: '',
                        itemStyle: {
                            color: '#9747FF'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataLow // 总数减去当前项数(灰色占比)
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });


    myChart.on('click', function (params) {
        let typeName = params.seriesName
        names.forEach(e => {
            if (e.label == typeName) {
                SpeciesList.value = e.names;
                isSpecies.value = true;
                return false
            }
        })
    });

}

const drawbar = (dom, x, y, title, names) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: y,
                type: 'bar',
                barWidth: '30',
                itemStyle: {
                    borderRadius: 10, // 设置圆角半径
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#387BFF' },
                        { offset: 1, color: '#387BFF00' }
                    ])
                }
            }
        ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

    myChart.on('click', function (params) {
        let typeName = params.name
        names.forEach(e => {
            if (e.label == typeName) {
                SpeciesList.value = e.names;
                isSpecies.value = true;
                return false
            }
        })
    });
}

const gettime = () => {
    if (year.value != null) {
        time = year.value.getFullYear();
    } else {
        time = '';

    }
    getdataCount();
    getspeciesStatistics();
}

const getdataCount = async () => {
    let params = '?areaId=' + usermsg.areaId + '&year=' + time;
    let res = await dataCount(params)
    if (res.code == '200') {
        let ar = [
            {
                border: '#9747FF',
                color: 'rgba(151, 71, 255, 0.10)',
                name: '动物(种)'
            },
            {
                border: '#387BFF',
                color: 'rgba(56, 123, 255, 0.10) ',
                name: '植物(种)'
            },
            {
                border: '#FCD60F',
                color: 'rgba(252, 214, 15, 0.10)',
                name: '真菌(种)'
            },
            {
                border: '#0AD0A1',
                color: 'rgba(10, 208, 161, 0.10)',
                name: '新命名(种)'
            }
        ]
        res.data.countShowCount.forEach((e, x) => {
            e['border'] = ar[x].border;
            e['color'] = ar[x].color;
            e['name'] = ar[x].name;
        })
        clist.value = res.data.countShowCount;

        let mt = [];
        res.data.monthCount.forEach(e => {
            let z = {
                name: e.label,
                type: 'line',
                stack: 'Total',
                data: e.countDeatail
            }
            mt.push(z)
        })

        drawLine(mt);

        let at = [];
        res.data.animalTypeCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            at.push(z)
        })
        drawPie('chart2', at, '种类统计', res.data.animalTypeCount);

        let al = [];
        res.data.animalLevelCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            al.push(z)
        })
        drawpie2('chart3', al, res.data.animalLevelCount);

        let aiucx = [], aiucy = [];
        res.data.animalIucnCount.forEach(e => {
            aiucx.push(e.label);
            aiucy.push(e.sum);
        })
        drawbar('chart4', aiucx, aiucy, 'IUCN红色名录统计', res.data.animalIucnCount);

        let rt = [];
        res.data.residentTypeCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            rt.push(z)
        })
        drawPie('chart5', rt, '鸟类居留型统计', res.data.residentTypeCount);

        let pl = [];
        res.data.plantLevelCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            pl.push(z)
        })
        drawpie2('chart6', pl, res.data.plantLevelCount);
        let piucx = [], piucy = [];
        res.data.plantIucnCount.forEach(e => {
            piucx.push(e.label);
            piucy.push(e.sum);
        })
        drawbar('chart7', piucx, piucy, 'IUCN红色名录统计', res.data.animalIucnCount);
        let pt = [];
        res.data.plantTypeCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            pt.push(z)
        })
        drawPie('chart8', pt, '植物分类统计', res.data.plantTypeCount);
        let dsc = [];
        res.data.dataSourceCount.forEach(e => {
            let z = { value: e.sum, name: e.label };
            dsc.push(z);
            dscs.value += e.sum
        })
        drawPie('chart9', dsc, '数据来源', []);
        dataSourceCount.value = res.data.dataSourceCount;
    }
}

const qhtype = (data) => {
    layerType.value = data.label;
    if (data.value == '按网格') {
        drawwangge()
    }
    if (data.value == '按区域') {
        getGnqh()
    }
    if (data.value == '热力分布' || data.value == '点位分布') {
        smap.value.delLayers('tongjifenxis01')
    }
    getspeciesStatistics();
}

const lookspanc = (data) => {
    SpeciesList.value = data.names
    isSpecies.value = true
}

const handleClick = (tab) => {
    // if (tab != '全部物种分布') {
    //     keywords.value = ''
    // }
    getspeciesStatistics()
}

const FilterColor = (data) => {
    let color = '';
    if (data == undefined) {
        color = 'rgba(255, 255, 255, 0.1)'
    } else {
        // if (data < 100) {
        //     color = 'rgba(247, 28, 28, 0.60)'
        // }
        // if (data >= 100 && data < 200) {
        //     color = 'rgba(191, 12, 12, 0.50)'
        // }
        // if (data >= 200 && data < 450) {
        //     color = 'rgba(125, 0, 0, 0.70)'
        // }
        // if (data >= 450) {
        //     color = 'rgba(65, 3, 3, 0.60)'
        // }
        color = data.color
    }
    return color
}


const getGrids = async () => {
    let res = await Grids(usermsg.areaId)
    if (res.code == '200') {
        let arr = []
        res.data.forEach((e, x) => {
            arr = [
                {
                    id: e.id,
                    name: e.gridNumber,
                    textColor: "#a78839",
                    borderColor: "#F71C1C",
                    fillColor: 'rgba(255, 255, 255, 0.1)',
                    data: {
                        gridNumber: e.gridNumber,
                        type: '网格'
                    },
                    geojson: e.geojson
                }
            ]
            gridMap.value.forEach(ss => {
                if (ss.gridNumber == e.gridNumber) {
                    arr = [{
                        id: e.id,
                        name: e.gridNumber,
                        textColor: "#a78839",
                        borderColor: "#F71C1C",
                        fillColor: ss.color,
                        data: {
                            gridNumber: e.gridNumber,
                            type: '网格'
                        },
                        geojson: e.geojson
                    }]
                }
            })
            smap.value.addGeoJson(arr, e.id);
            gridid.push(e.id)
        })
    }
}

const drawwangge = async () => {
    let res = await wangges(usermsg.areaId)
    if (res.data) {
        let item = res.data.data[0];
        smap.value.drawWMS('tongjifenxis01', item.layerUrl, item.layerName, item.styleId, item.cql);
        getspeciesStatistics()
    }

}

const getspeciesStatistics = async () => {
    let params = '?areaId=' + usermsg.areaId + '&type=' + activeName.value + '&layerType=' + layerType.value + '&keywords=' + '&year=' + time
    let res = await speciesStatistics(params)
    if (res.code == '200') {
        ghid.forEach(e => {
            smap.value.delLayers(e)
        })
        ghid = [];
        smap.value.delLayers('anwangge01')
        smap.value.delLayers('relics001');
        smap.value.delLayers('juhedian001cs');


        let GridData = [];
        if (res.data.gridMap != null && layerType.value == '网格') {

            res.data.gridMap.forEach((e, index) => {
                let z = {
                    id: `${index}Gridsct`,
                    name: e.gridNumber,
                    textColor: "#a78839",
                    borderColor: "#F71C1C",
                    fillColor: e.color,
                    data: {
                        gridNumber: e.gridNumber,
                        type: '网格'
                    },
                    geojson: e.geojson
                }

                GridData.push(z)

            })

            if (GridData.length > 0) {
                smap.value.addGeoJson(GridData, 'anwangge01');

            }


            // getGrids()
        } else {
            gridid.forEach(e => {
                smap.value.delLayers('anwangge01')
            })
            gridid = [];
        }

        if (res.data.gnqhMap != null && layerType.value == '区域') {
            // res.data.gnqhMap.forEach((e, index) => {
            //     let z = {
            //         id: `${index}Gridsct`,
            //         name: e.speciesName,
            //         textColor: "#a78839",
            //         borderColor: "#F71C1C",
            //         fillColor: '',
            //         iconSrc: e.avatar,
            //         data: {
            //             gridNumber: e.gnqhNumber,
            //             type: '区域'
            //         },
            //         geojson: { coordinates: [e.centerLon, e.centerLat], type: "Point" }
            //     }

            //     GridData.push(z)

            // })

            // if (res.data.gnqhMap.length > 0) {
            //     smap.value.delOverlay();
            // }
            smap.value.delOverlay();

            if (res.data.gnqhMap.length > 0) {
                setTimeout(function () {
                    res.data.gnqhMap.forEach(e => {
                        e['type'] = '区域'
                        e['id'] = e.gnqhNumber
                    })
                    smap.value.addMoreOverlay(res.data.gnqhMap);
                }, 500)

            }
        } else {
            smap.value.delOverlay();
            // gridid.forEach(e => {
            //     smap.value.delLayers('anwangge01')
            // })
            // gridid = [];
        }

        if (res.data.heatArr.length > 0 && layerType.value == '热力') {
            smap.value.addHeatMap('relics001', res.data.heatArr);
        } else {
            smap.value.delLayers('relics001');
        }

        if (res.data.locationArr.length > 0 && layerType.value == '点位') {
            smap.value.delLayers('relics001');
            smap.value.addcluster(res.data.locationArr, 'juhedian001cs');
        } else {
            smap.value.delLayers('juhedian001cs');
        }
    }
}

const getGnqh = async () => {
    let res = await xiaoban(usermsg.areaId)
    if (res.data) {
        let item = res.data.data[0];
        smap.value.drawWMS('tongjifenxis01', item.layerUrl, item.layerName, item.styleId, item.cql);
    }
}

const filterGgba = () => {
    var r = Math.floor(Math.random() * 256); // 生成 0 到 255 之间的随机整数
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var rgbaColor = 'rgba(' + r + ', ' + g + ', ' + b + ', 0.8)';
    return rgbaColor;
}

const getPopData = (data) => {
    morData.value = data;
    cnmdw.value = true
    if (data.type == '网格') {
        let params = '?areaId=' + usermsg.areaId + '&gridNumber=' + data.gridNumber + '&type=' + activeName.value + '&year=' + time
        GridsData(params).then(res => {
            if (res.code == '200') {
                wgName.value = data.gridNumber;
                let o = res.data;
                majorEnvirType.value = o.majorEnvirType;
                recoverNum.value = o.recoverNum;
                layNum.value = o.layNum;
                realTimeNum.value = o.realTimeNum;
                animalInfo.value = o.animalInfo;
                mediaList.value = o.mediaList.slice(0, 3);
                iswgp.value = true;
            }
        })
    }
    if (data.type == '区域') {
        let params = '?areaId=' + usermsg.areaId + '&keywords=' + data.gnqhNumber + '&type=' + activeName.value + '&year=' + time
        areaData(params).then(res => {
            if (res.code == '200') {
                wgName.value = data.gnqhNumber;
                let o = res.data;
                majorEnvirType.value = o.majorEnvirType;
                recoverNum.value = o.recoverNum;
                layNum.value = o.layNum;
                realTimeNum.value = o.realTimeNum;
                animalInfo.value = o.animalInfo;
                mediaList.value = o.mediaList.slice(0, 3);
                iswgp.value = true;
            }
        })
    }
    if (data.type == '点位') {
        let params = '?id=' + data.gridNumber + '&dataSource=' + data.dataSource
        loaltionData(params).then(res => {
            if (res.code == '200') {
                cnmdw.value = false
                wgName.value = '';
                let o = {};
                majorEnvirType.value = {};
                recoverNum.value = 0;
                layNum.value = 0;
                realTimeNum.value = 0;
                animalInfo.value = {};
                mediaList.value = res.data.slice(0, 3);
                iswgp.value = true;
            }
        })
    }
}

const handleCurrentChange = (val) => {
    pageNum.value = val;
    lookm();
}

const gettimes = (data) => {
    if (times.value != null) {
        var year = data.getFullYear();
        var month = data.getMonth() + 1;
        var date = data.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        var t1 = year + "-" + month + "-" + date;
        timeStr.value = t1 + "~" + t1
    } else {
        timeStr.value = "";
    }

    pageNum.value = 1;
    currentPage.value = 1;
    lookm();
}

const lookm = () => {
    if (morData.value.type == '网格') {
        let params = '?areaId=' + usermsg.areaId + '&gridNumber=' + morData.value.gridNumber + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value + '&type=全部'
        GridsMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
    if (morData.value.type == '区域') {
        let params = '?areaId=' + usermsg.areaId + '&keywords=' + morData.value.gnqhNumber + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value + '&type=全部'
        areaMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
    if (morData.value.type == '点位') {
        let params = '?id=' + morData.value.gridNumber + '&dataSource=' + morData.value.dataSource + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value
        locationMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
}

const goVarious = (item) => {

    if (item.type == 'animal') {
        route.push({ path: '/statisticalCharts/animaldetails', query: { id: item.resourceId } });
    }
    if (item.type == 'plant') {
        route.push({ path: '/statisticalCharts/plantdetails', query: { id: item.resourceId } });
    }
    if (item.type == 'fungus') {
        route.push({ path: '/statisticalCharts/fungusdetails', query: { id: item.resourceId } });
    }

}

let usermsg = {};
onMounted(() => {
    usermsg = window.sessionStorage.getItem('usermsg');
    if (usermsg == undefined) {
        alert('您无权查看该网站，请登录后才能正常使用')
    } else {
        usermsg = JSON.parse(usermsg);
    };
    smap.value.initmap(drawwangge);
    getdataCount();
    // getspeciesStatistics();
    // setTimeout(function () {
    //     drawwangge()
    // }, 1500)
})
</script>
<template>
    <div>
        <div class="ha-title" style="margin-bottom: 16px;">
            <div>
                <span>
                    统计分析
                </span>
            </div>
        </div>

        <el-row :gutter="10">
            <el-col :span="3">
                <el-date-picker size="large" v-model="year" @change="gettime()" type="year" placeholder="请选择年份" />
            </el-col>
        </el-row>

        <div class="chart-wls dbx">
            <div class="wls-ct">
                <div class="ha-title htj">
                    <div>
                        <span>数据总览</span>
                    </div>
                </div>
                <div class="wls-ct1">
                    <div class="ct1" :style="{ backgroundColor: i.color, borderLeft: '4px solid' + i.border }"
                        v-for="(i, index) in clist" :key="i.type + 'wls'" @click.stop="lookspanc(i)">
                        <div style="color: #606266;font-size: 18px;font-weight: 700;">
                            <span>{{ i.label }}</span>
                        </div>
                        <div style="color: #333;font-size: 32px;font-weight: 700;margin: 8px 0;">
                            <span>{{ i.sum }}</span>
                        </div>
                        <div>
                            <i class="icon iconfont icon-zhaopian" style="margin-right: 8px;"></i>
                            <span style="margin-right: 24px;">{{ i.imgSum }}张</span>
                            <i class="icon iconfont icon-shipin" style="margin-right: 8px;"></i>
                            <span>{{ i.videoSum }}条</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wls-ct">
                <div class="ha-title htj">
                    <div>
                        <span>动物统计</span>
                    </div>
                </div>
                <div class="wls-ct1">
                    <div id="chart1"></div>
                    <div id="chart2"></div>
                </div>
                <div class="wls-ct1" style="margin-top: 24px;">
                    <div class="chart3" id="chart3"></div>
                    <div class="chart3" id="chart4"></div>
                    <div class="chart3" style="margin-right: 0;" id="chart5"></div>
                </div>
            </div>

            <div class="wls-ct">
                <div class="ha-title htj">
                    <div>
                        <span> 植物统计</span>
                    </div>
                </div>
                <div class="wls-ct1">
                    <div class="chart3" id="chart6"></div>
                    <div class="chart3" id="chart7"></div>
                    <div class="chart3" style="margin-right: 0;" id="chart8"></div>
                </div>
            </div>


            <div class="wls-ct">
                <div class="ha-title htj">
                    <div>
                        <span>物种统计</span>
                    </div>
                </div>

                <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getspeciesStatistics()">
                    <el-tab-pane label="全部物种分布" name="全部物种分布"></el-tab-pane>
                    <el-tab-pane label="常见动物分布" name="常见动物分布"></el-tab-pane>
                    <el-tab-pane label="重点保护动物分布" name="重点保护动物分布"></el-tab-pane>
                    <el-tab-pane label="兽类分布" name="兽类分布"></el-tab-pane>
                    <el-tab-pane label="鸟类分布" name="鸟类分布"></el-tab-pane>
                </el-tabs>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-button v-for="(i, index) in typelist" :key="i.id" @click="qhtype(i)"
                            :style="layerType == i.label ? 'background-color: #387BFF;color: #fff;' : ''">{{
                                i.value
                            }}</el-button>
                    </el-col>
                    <el-col :span="12"></el-col>

                </el-row> -->

                <div class="smap-box">
                    <div style="width: 100%;height: 100%;display: flex;">
                        <sa-map style="flex: 8;flex-shrink: 0;" ref="smap" @wgpup="getPopData"></sa-map>
                        <div style="flex: 2;display: flex;padding-left: 16px;">
                            <div class="spcss">
                                <div class="spcss-1" @click="activeName = item.label; getspeciesStatistics()"
                                    :style="{ color: activeName == item.label ? '#387BFF' : '', backgroundColor: activeName == item.label ? 'rgba(56, 123, 255, 0.15)' : '', borderRight: activeName == item.label ? '2px solid #387BFF' : '1px solid rgba(220, 223, 230, 1)' }"
                                    v-for="(item, index) in typeData" :key="index + 'hdfhs'">
                                    <span>{{ item.label }}</span>
                                </div>
                            </div>
                            <div class="spcss-2">
                                <div class="spcss-3" v-for="(item, index) in typelist" :key="item.id">
                                    <div @click=" layerType = item.label; qhtype(item)"
                                        :style="{ color: layerType == item.label ? '#fff' : '#387BFF', backgroundColor: layerType == item.label ? '#387BFF' : '#fff' }">
                                        <span>{{ item.value }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="map-pups" v-show="layerType == '网格'">
                        <div>
                            <span style="color: #fff;font-weight: 700;">各网格频次统计</span>
                        </div>
                        <ul>
                            <li>
                                <img :src="pc440" alt="">
                                <span>450次 &lt;</span>
                            </li>
                            <li>
                                <img :src="pc450" alt="">
                                <span>450次~200次</span>
                            </li>
                            <li>
                                <img :src="pc200" alt="">
                                <span>200次~100次 &lt;</span>
                            </li>
                            <li>
                                <img :src="pc100" alt="">
                                <span>100次 &gt;</span>
                            </li>
                        </ul>
                    </div> -->
                </div>

            </div>

            <div class="wls-ct">
                <div class="ha-title htj">
                    <div>
                        <span> 来源统计</span>
                    </div>
                </div>
                <div class="wls-ct1">
                    <div class="chart3" style="flex: 2;" id="chart9"></div>
                    <div class="chart3" style="flex: 3;">


                        <el-table :data="dataSourceCount" style="width: 100%;">

                            <el-table-column label="来源" prop="label" show-overflow-tooltip />
                            <el-table-column label="数据数量" prop="sum" show-overflow-tooltip />
                            <el-table-column label="占比" prop="ke">
                                <template #default="scope">
                                    <span>{{ ((scope.row.sum / dscs) * 100).toFixed(1) }}%</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div style="height:40px;">

            </div>
        </div>


        <!-- 物种名称B -->
        <div class="wgp" v-if="isSpecies">
            <div class="Species dbx">
                <div class="d-lkb-c" @click.stop="isSpecies = false">
                    <img :src="close" alt="">
                </div>
                <div class="Species_title">
                    <div></div>
                    <span style="font-size: 18px">物种名称</span>
                </div>
                <div style="height: 16px;"></div>
                <div class="clearfix chyc dbx">
                    <div style="width: calc((100% - 24px) / 4)" v-for="(i, x) in SpeciesList" :key="x + 'dfsfsaqwerqf'"
                        @click.stop="goVarious(i)">
                        <span style="width: 100%;text-align: center;" :title="i.name">{{ i.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物种名称E -->

        <!-- wgp B -->
        <div class="wgp" v-show="iswgp">
            <div>
                <div class="wgp_c_t">
                    <div v-if="cnmdw"><span>网格{{ wgName }}</span></div>
                    <div v-else></div>
                    <div @click="iswgp = false">
                        <img :src="close" alt="">
                    </div>
                </div>
                <!-- 主要生境 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>主要生境</span>
                    </div>
                    <div class="clearfix chyc dbx">
                        <div v-for="i in majorEnvirType" :key="i.id">{{ i }}&nbsp;</div>
                    </div>
                </div>
                <!-- 主要生境 E -->
                <!-- 近期发现 B -->
                <div class="jqfx">
                    <div><span>近期发现</span></div>
                    <div class="pic">
                        <div><span @click="lookm()">查看更多</span></div>
                        <div class="imb">
                            <div v-for="(i, index) in mediaList" :key="i.id">
                                <el-image style="width: 100%;height: 100px;" :src="i.thumbnail"
                                    v-if="i.fileType == 'image'" :zoom-rate="1.2" :preview-src-list="[i.mediaUrl]"
                                    :initial-index="index" />

                                <div @click.stop="lookVideo.open(i.mediaUrl)" style="height: 100px;" class="playlms"
                                    v-if="i.fileType == 'video'">
                                    <img style="width: 100%;height: 100%;" :src="i.converUrl" alt="">
                                    <img style="width: 50px;height:50px;position: absolute;z-index: 2;" :src="play"
                                        alt="">
                                </div>

                                <div class="tb-wavs" v-if="i.fileType == 'voice'" style="height: 100px;">
                                    <img :src="twavs" alt="">
                                    <div class="tb-ctrsljs" @click.stop="playAudio(i)">
                                        <div>
                                            <img :src="isplay == i.id ? audiogif : iconaudio" alt="">
                                        </div>
                                        <span style="font-size: 12px;">{{ `${i.duration}''`
                                            }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 近期发现 E -->
                <!-- 发现动物 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>发现动物</span>
                    </div>
                    <div class="clearfix chyc dbx">
                        <div v-for="i in animalInfo" :key="i.id">
                            <span :title="i.name">{{ i.name }}</span>
                            <span>{{ i.cishu }}次</span>
                        </div>
                    </div>
                </div>
                <!-- 发现动物 E -->
            </div>
        </div>
        <!-- wgp E -->
        <!-- mmig B -->
        <div class="gdzp" v-if="isgdzp">
            <div>
                <div class="mmigc" @click.stop="isgdzp = false">
                    <img :src="close" alt="">
                </div>
                <!-- 时间选择器 B -->
                <el-date-picker v-model="times" @change="gettimes" type="date" placeholder="选择日期">
                </el-date-picker>
                <!-- 时间选择器 E -->
                <!-- 容器 B -->
                <div class="mmigb">
                    <div v-for=" (i, index) in list" :key="i.id">
                        <!-- <video v-if="$wlsf.filiv(i.path) == 4 || i.type == 'voice'" :src="i.path" controls
                            alt=""></video>
                        <el-image v-else style="width: 100%; height:100%" :src="i.path" :zoom-rate="1.2" :max-scale="7"
                            :min-scale="0.2" :preview-src-list="[i.path]" fit="cover" /> -->
                            
                        <el-image style="width: 100%;height: 140px;" :src="i.thumbnail" v-if="i.fileType == 'image'"
                            :zoom-rate="1.2" :preview-src-list="[i.mediaUrl]" :initial-index="index" />

                        <div @click.stop="lookVideo.open(i.mediaUrl)" style="height: 140px;" class="playlms"
                            v-if="i.fileType == 'video'">
                            <img style="width: 100%;height: 100%;" :src="i.converUrl" alt="">
                            <img style="width: 50px;height:50px;position: absolute;z-index: 2;" :src="play" alt="">
                        </div>

                        <div class="tb-wavs" v-if="i.fileType == 'voice'" style="height: 130px;">
                            <img :src="twavs" alt="">
                            <div class="tb-ctrsljs" @click.stop="playAudio(i)">
                                <div>
                                    <img :src="isplay == i.id ? audiogif : iconaudio" alt="">
                                </div>
                                <span style="font-size: 12px;">{{ `${i.duration}''`
                                    }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 容器 E -->
                <!-- 分页 B -->
                <div class="pages">
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                        :page-size="12" layout="total, prev, pager, next, jumper" :total="totalElements">
                    </el-pagination>
                </div>
                <!-- 分页 E -->
            </div>
        </div>
        <!-- mmig E -->
        <pre-video ref="lookVideo" />
    </div>
</template>
<style scoped>
.chart-wls {
    width: 100%;
    height: calc(100% - 100px);
    overflow: hidden;
}

.htj {
    margin: 16px 0;
}


/* .htj span {
    font-size: 14px !important;
} */

.wls-ct {
    width: 100%;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.wls-ct1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct1 {
    flex: 1;
    height: 160px;
    margin-right: 24px;
    padding: 16px 24px;
}

.ct1:last-child {
    margin-right: 0;
}

#chart1 {
    flex: 6.666666666666666666666666666;
    height: 300px;
    margin-right: 24px;
}

#chart2 {
    flex: 3.3333333333333333333333333333;
    height: 300px;
}

.chart3 {
    flex: 1;
    height: 300px;
    margin-right: 24px;
}

.wls-ct1>div:last-child {
    margin-right: 0;
}

.dbx {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}

/* 隐藏垂直滚动条 */
.dbx::-webkit-scrollbar {
    width: 0;
    /* 隐藏垂直滚动条 */
}

.dbx::-webkit-scrollbar-horizontal {
    display: none;
}

/* 隐藏垂直滚动条（如果有） */
.dbx::-webkit-scrollbar-vertical {
    display: none;
}

/* 隐藏滚动条的滑块 */
.dbx::-webkit-scrollbar-thumb {
    background: transparent;
}


.wgp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.wgp>div {
    width: 900px;
    padding: 0 16px;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
}

.Species {
    height: 400px;
    padding: 24px !important;
    position: relative;
}

.d-lkb-c {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

.Species_title {
    display: flex;
    align-items: center;
}

.Species_title>div:nth-child(1) {
    width: 3px;
    height: 16px;
    margin-right: 8px;
    background-color: var(--wls-color);
}

.chyc>div {
    float: left;
    width: 116px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 8px;
    background: #F5F7FA;
    border-radius: 4px;
    cursor: pointer;
}

.chyc>div:nth-child(4n) {
    margin-right: 0;
}

.chyc>div>div>span {
    display: inline-block;
}

.chyc {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chyc>div>span:nth-child(1) {
    width: 80px;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chyc>div>span:nth-child(2) {
    color: #999999;
}

.smap-box {
    width: 100%;
    height: 800px;
    margin-top: 16px;
    position: relative;
}

.map-pups {
    width: 480px;
    height: 120px;
    padding: 16px;
    position: absolute;
    bottom: 16px;
    left: 16px;
    border-radius: 4px 4px 0px 0px;
    background: rgba(0, 0, 0, 0.60);
}

.map-pups ul {
    width: 100%;
    overflow: hidden;
}

.map-pups ul li {
    float: left;
    width: 50%;
    height: 40px;
    color: #fff;
    display: flex;
    align-items: center;
}

.map-pups ul li img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* 
.wgp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.wgp>div {
    width: 650px;
    padding: 0 16px;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
} */

.wgp_c_t {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wgp_c_t>div:nth-child(1) {
    font-size: .16px;
    font-weight: 700;
}

.wgp_c_t>div:nth-child(2) {
    font-size: 20px;
    cursor: pointer;
}

.sjhj {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
}

.sjhj>div:nth-child(1) {
    width: 110px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #387BFF;
    margin-right: 8px;
    border-radius: 4px;
}

.chyc>div {
    float: left;
    width: 140px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 8px;
    background: #F5F7FA;
    border-radius: 4px;
}

.chyc>div:nth-child(4n) {
    margin-right: 0;
}

.chyc>div>div>span {
    display: inline-block;
}

.chyc {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chyc>div>span:nth-child(1) {
    /* width: 60px; */
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chyc>div>span:nth-child(2) {
    color: #999999;
}

.jqfx {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
}

.jqfx>div:nth-child(1) {
    width: 110px;
    height: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #387BFF;
    margin-right: 8px;
    border-radius: 4px;
}

.jqfx .pic {
    width: calc(100% - 120px);
    height: 160px;
    padding: 0 10px;
    background-color: #F5F7FA;
    overflow: hidden;
}

.jqfx .pic>div:nth-child(1) {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #387BFF;
    text-decoration: underline;
    cursor: pointer;
}

.imb {
    width: 100%;
    height: calc(100% - 32px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.imb>div {
    width: calc((100% - 50px)/4);
    /* height: 120px; */
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9F9FA;
    border: 1px solid #E4E7ED;
    position: relative;
    overflow: hidden;
}

.mly {
    width: 72px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background: #387BFF;
    border-radius: 4px 0px 0px 0px;
}

.imb>div:last-child {
    margin-right: 0;
}

/* .imb>div img {
    max-height: 100%;
    max-width: 100%;
} */

.gdzp {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19;
}

.gdzp>div {
    width: 1400px;
    height: 800px;
    padding: 32px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.mmigc {
    font-size: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    cursor: pointer;
}

.mmigb {
    width: 100%;
    height: calc(100% - 120px);
    margin: 32px 0;
}

.mmigb>div {
    width: calc((100% - 64px) / 5);
    float: left;
    /* height: 130px; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: 0 16px 16px 0;
    border: 1px solid #E4E7ED;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* .mmigb>div img {
    max-width: 100%;
    max-height: 100%;
}

.mmigb>div video {
    width: 100%;
    height: 100%;
} */

.mmigb>div:nth-child(5n) {
    margin-right: 0;
}

.mmily {
    width: 130px;
    height: 44px;
    position: absolute;
    bottom: 16px;
    right: 16px;
    background-color: #01C144;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
}

.pages {
    width: 100%;
    display: flex;
    justify-content: center;
}

.Species {
    height: 400px;
    padding: 24px !important;
    position: relative;
}

.Species_title {
    display: flex;
    align-items: center;
}

.Species_title>div:nth-child(1) {
    width: 3px;
    height: 16px;
    margin-right: 8px;
    background-color: var(--wls-color);
}

.spcss {
    width: 55%;
    cursor: pointer;
    overflow: hidden;
}

.spcss-1 {
    width: 100%;
    height: 50px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.spcss-2 {
    width: 45%;
    cursor: pointer;
    overflow: hidden;
}

.spcss-3 {
    width: 100%;
    height: 50px;
    padding-left: 16px;
    display: flex;
    align-items: center;
}

.spcss-3>div {
    width: 90px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #387BFF;
    border-radius: 4px;
    border: 1px solid rgba(56, 123, 255, 1);
}

.playlms {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
</style>